<template>
  <div>
    <div class="demo">
      <friendItem
        v-for="item in pagenationContent"
        :key="item.id"
        :id="item.id"
        :username="item.username"
        :prod="item.prod"
        :introduce="item.introduce"
        :way="item.way"
        :time="item.time"
        :title="item.title"
        :text="item.text"
        :avatar="item.avatar"
        :poster="item.poster"
        :render="item.render"
        :realname="item.realname"
        @playVideo="playVideo"
      ></friendItem>
      <transition name="fadeScale">
        <div class="blackBg" v-show="ifBG"></div>
      </transition>
      <transition name="fadeIn">
        <span
          v-show="ifPlayer"
          style="display: inline-block; border-radius: 50%"
          @click="closePlayer"
          >X</span
        >
      </transition>
      <transition name="translateY">
        <video-player ref="videoDom" v-if="ifPlayer" class="video-player" />
      </transition>
      <div class="right" v-if="ifPlayer">
        <div class="card">{{ introduce }}</div>
      </div>
      <!-- <pagenation
        :pageno="pageno"
        :allContent="videoList"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
      ></pagenation> -->
      <!-- <transition appear appear-active-class="fadeInTranslateX">
        <div class="searchInput">
          <input
            type="text"
            maxlength="20"
            placeholder="请输入标题"
            v-model="searchTitle"
            @focus="getFocusItem"
            @input="getCurrentItem"
            @blur="cancelSearch"
          />
          <i class="iconfont iconsousuo" @click="startSearchProd"></i>
        </div>
      </transition> -->
      <div
        class="menu"
        @click="ifSearchOrAdd = !ifSearchOrAdd"
        :class="{ active: ifSearchOrAdd }"
      >
        <div></div>
        <div></div>
        <div></div>
      </div>
      <!-- <transition name="fadeScaleFrom0">
        <div class="MSearchOrAdd" v-show="ifSearchOrAdd">
          <div class="MsearchInput">
            <input
              type="text"
              maxlength="20"
              placeholder="请输入标题"
              v-model="searchTitle"
              @focus="getFocusItem"
              @input="getCurrentItem"
              @blur="cancelSearch"
            />
            <i class="iconfont iconsousuo" @click="startSearchProd"></i>
          </div>
          <transition name="translateXFadeIn">
            <search class="MsearchList" v-show="ifShowSearch"></search>
          </transition>
        </div>
      </transition> -->

      <transition name="fadeScale">
        <div class="screen" v-if="IfReading">
          <div class="screenBox">
            <span class="cancel" @click="closeScreen">X</span>
            <p class="WriteTitle">{{ title }}</p>
            <span class="main" v-html="text"></span>
          </div>
        </div>
      </transition>
      <transition name="translateXFadeIn">
        <search
          class="searchList"
          @clickSearchItemForFriend="selectLastTitle"
          :searchMsg="searchMsg"
          v-show="ifShowSearch"
        ></search>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import friendItem from "./friendItem";
import videoAdd from "../../components/videoAdd";
import pagenation from "../../components/pagenation";
import search from "../../components/search";
import videoPlayer from "./videojs.vue";
import { ref, onMounted, computed, nextTick } from "vue";
import { useStore } from "vuex";
import $axios from "@/http";
const videoDom = ref<any>(null);
const $store = useStore();
const introduce = ref<string>("");
const ifDel = ref<boolean>(false);
const ifSearchOrAdd = ref<boolean>(false);
const msgStatus = ref<boolean>(false);
const searchTitle = ref<string>("");
const text = ref<string>("");
const title = ref<string>("");
const delId = ref<number>(0);
const updateId = ref<number>(0);
const IfReading = ref<boolean>(false);
const ifShowSearch = ref<boolean>(false);
const ifBG = ref<boolean>(false);
const ifPlayer = ref<boolean>(false);
const ifAddProd = ref<boolean>(false);
const pageno = ref<number>(1);
const pagesize = ref<number>(7);
const slowSearch = ref<boolean>(false);

const videoList = ref<Array<any>>([]);
const AllVideoList = ref<Array<any>>([]);
const UserChooseList = ref<Array<any>>([]);
const searchMsg = () => {
  let searchVideo = UserChooseList.value.filter((item, index: number) => {
    return index < 10;
  });
  return searchVideo.length ? searchVideo : [{ title: "没有数据" }];
};
//是否拥有添加视频的权限
const addProdgrant = computed(() => {
  return (
    $store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
    $store.getters.user.status === "d630fbb5fd6026ccb4af0eb68d3"
  );
});
const pagenationContent = computed(() => {
  return videoList.value.filter((item: any, index: number) => {
    return (
      index > (pageno.value - 1) * pagesize.value - 1 &&
      index <= (pageno.value - 1) * pagesize.value - 1 + pagesize.value
    );
  });
});
onMounted(() => {
  getAllVideoList();
});
const closeScreen = () => {
  IfReading.value = false;
  ifBG.value = false;
};
const cancelSearch = () => {
  setTimeout(() => {
    ifShowSearch.value = false;
  }, 100);
};
const selectLastTitle = (msg: string) => {
  console.log(msg);
  searchTitle.value = msg;
};
const getCurrentItem = () => {
  if (slowSearch.value) {
    return;
  }
  slowSearch.value = true;
  $axios
    .get("/prod/chooseSearch", {
      params: {
        searchTitle: searchTitle,
      },
    })
    .then((res) => {
      slowSearch.value = false;
      if (res.data.error === -1) {
        UserChooseList.value = res.data.data;
      }
    });
};
const getFocusItem = () => {
  ifShowSearch.value = true;
};
const startSearchProd = () => {
  $axios
    .get("/prod/chooseSearch", {
      params: {
        searchTitle: searchTitle,
      },
    })
    .then((res) => {
      if (res.data.error === -1) {
        videoList.value = res.data.data;
        UserChooseList.value = res.data.data;
      }
    });
};
const changePageSize = (pageSize: number) => {
  console.log(typeof pageSize);
  pagesize.value = pageSize;
  pageno.value = 1;
};
const changePageNo = (index: number) => {
  pageno.value = index + 1;
};
const cancelAddProd = () => {
  ifAddProd.value = false;
  ifBG.value = false;
};
const addNewProd = () => {
  ifAddProd.value = true;
  ifBG.value = true;
  // updateFriendState.origin = "add";
};
const closePlayer = () => {
  ifPlayer.value = false;
  ifBG.value = false;
};
const playVideo = (msg: any) => {
  // playerOptions.sources[0].src = msg.video;
  // playerOptions.poster = msg.poster;
  introduce.value = msg.introduce;
  ifPlayer.value = true;
  ifBG.value = true;
  nextTick(() => {
    videoDom.value.playerOptions.sources[0].src = msg.video;
    videoDom.value.playerOptions.poster = msg.poster;
  });
};
const getAllVideoList = () => {
  $axios
    .get("/prod/search")
    .then((res) => {
      console.log(res);
      if (res.data.error == -1) {
        videoList.value = res.data.data;
        AllVideoList.value = res.data.data;
        UserChooseList.value = res.data.data;
      } else if (res.data.error == 0) {
        videoList.value = [];
        AllVideoList.value = [];
      }
    })
    .catch((err) => {
      alert("服务器错误");
    });
};
</script>

<style lang="scss" scoped>
@import "../../css/pc/friend.scss";
// @import "../../css/mobile/mfriend.scss";
.blackBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
